<template>
  <view class="container">
    <view class="help-content">
      <!-- 搜索区域 -->
      <view class="search-section info-card">
        <u-search placeholder="搜索常见问题或关键词" v-model="searchKeyword" @search="handleSearch" @custom="handleSearch" bg-color="#f8fafc"
          search-icon-color="#64748b" color="#333" shape="round" :show-action="false"></u-search>
      </view>

      <!-- 常见问题 (FAQ) 卡片 -->
      <view class="info-card faq-card">
        <view class="section-title">
          <u-icon name="question-circle" color="#0ea5e9" size="18"></u-icon>
          <text class="title-text">常见问题</text>
        </view>
        <u-collapse :accordion="true" :item-style="collapseItemStyle" :head-style="collapseHeadStyle" :body-style="collapseBodyStyle">
          <u-collapse-item v-for="(faq, index) in filteredFaqs" :key="index" :title="faq.question" :name="index">
            <text class="faq-answer">{{ faq.answer }}</text>
          </u-collapse-item>
          <u-empty v-if="filteredFaqs.length === 0" mode="search" text="没有找到相关问题" text-color="#64748b" text-size="28" icon-size="120"
            margin-top="40"></u-empty>
        </u-collapse>
      </view>
      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </view>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        statusBarHeight: 0,
        customNavbarHeight: 0,
        safeAreaBottom: 0,

        mescroll: null, // mescroll实例
        searchKeyword: '',

        faqs: [
          { question: '如何注册/登录账号？', answer: '您可以通过手机号验证码或第三方平台（微信、QQ）快速注册/登录。' },
          { question: '忘记密码怎么办？', answer: '在登录页面点击“忘记密码”，通过手机验证码重置密码。' },
          { question: '如何发布招聘信息？', answer: '请在“我的”页面进入“企业中心”，点击“发布职位”填写相关信息即可。' },
          { question: '如何修改个人资料？', answer: '在“我的”页面点击头像进入个人资料页，即可修改您的信息。' },
          { question: '如何预约看房？', answer: '在房产详情页点击“立即预约看房”按钮，填写预约信息后会有专人联系您。' },
          { question: '如何联系商家？', answer: '在商家详情页或商品详情页，您可以找到“电话咨询”或“在线客服”按钮进行联系。' },
          { question: '平台收费吗？', answer: '平台基础功能免费，部分高级服务可能需要付费，具体请查看服务说明。' },
          { question: '我的信息安全吗？', answer: '我们严格遵守隐私政策，您的个人信息将受到严格保护，不会泄露给第三方。' }
        ],

        // u-collapse样式
        collapseItemStyle: {
          backgroundColor: '#f8fafc',
          borderRadius: '16rpx',
          marginBottom: '20rpx',
          overflow: 'hidden',
          border: '1rpx solid #e2e8f0'
        },
        collapseHeadStyle: {
          padding: '24rpx 32rpx',
          fontSize: '28rpx',
          fontWeight: '500',
          color: '#334155'
        },
        collapseBodyStyle: {
          padding: '0 32rpx 24rpx',
          fontSize: '26rpx',
          color: '#475569',
          lineHeight: '1.6'
        }
      }
    },
    computed: {
      filteredFaqs() {
        if (!this.searchKeyword) {
          return this.faqs;
        }
        const keyword = this.searchKeyword.toLowerCase();
        return this.faqs.filter(faq =>
          faq.question.toLowerCase().includes(keyword) ||
          faq.answer.toLowerCase().includes(keyword)
        );
      }
    },
    methods: {
      // 搜索处理
      handleSearch() {
        console.log('搜索关键词:', this.searchKeyword);
        // 搜索逻辑已在 computed 中实现，这里可以触发 mescroll 刷新以更新视图
        this.mescroll.resetUpScroll(); // 触发 mescroll 重新计算高度和显示
      },

      // 电话客服
      contactPhone() {
        uni.makePhoneCall({
          phoneNumber: '4001234567',
          success: () => {
            console.log('拨打电话成功');
          },
          fail: (err) => {
            console.error('拨打电话失败:', err);
            this.$refs.uToast.show({ message: '拨打电话失败', type: 'error' });
          }
        });
      },

      // 在线客服
      contactOnline() {
        console.log('跳转在线客服');
        this.$refs.uToast.show({ message: '正在连接在线客服...', type: 'info' });
        // uni.navigateTo({ url: '/pages/chat/online-service' }); // 实际跳转到在线客服页面
      },

      // 提交意见反馈
      submitFeedback() {
        console.log('跳转意见反馈');
        this.$refs.uToast.show({ message: '跳转意见反馈页面', type: 'info' });
        // uni.navigateTo({ url: '/pages/feedback/feedback-form' }); // 实际跳转到意见反馈页面
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  .help-content {
    padding: 32rpx;
  }

  .info-card {
    background: white;
    border-radius: 24rpx;
    margin-bottom: 32rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .search-section {
    padding: 24rpx 32rpx; // 调整内边距以适应搜索框
    margin-top: 0; // 搜索框紧贴顶部
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;
  }

  .faq-card {
    .faq-answer {
      display: block; // 确保文本换行
    }
  }

  .bottom-space {
    height: 40rpx;
  }
</style>